//注入jQuery符号
let $ = jQuery
//IP匹配模式：
function checkedIP(IP){
    return new RegExp('^((25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))\\.){3}(25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))$').test(IP)
}

/*
----------------------------------------------------访问记录数据表-------------------------------------------------------------------
 */

//定义数据源和刷新数据源以及数据刷新方法
let dataSourceUrl = ''
let flushUrl = ''
let flushMethod = ''



//自定义局部刷新表格对象，其中包含局部刷新表格的方法
let myTable = {
    table:layui.table,
    tableFlush: function(dataSourceUrl,sendMethod){
        this.table.render({
            elem:'#dataTable'
            ,cellMinWidth: 100
            ,height: 616
            ,method: sendMethod //请求方式
            ,url: dataSourceUrl //数据接口
            ,page: true//开启分页
            ,autoSort:true
            ,limit:14
            ,even:true
            ,response:{
                statusCode: 200,
            }
            //动态数据表格
            //如果响应数据格式不符合layui默认要求，则需要用到phraseData
            ,cols: [ [ //表头,两个括号间的空格不能去
                {type:'checkbox',width: '6%'},
                {field: 'index', title: '序号', width:'10%', unresize:true, sort: true },
                {field: 'userId', title: '授权ID', width:'24%',unresize:true},
                {field: 'visitIp', title: '来源IP', width:'23%',unresize:true},
                {field: 'visitDate', title: '访问日期', width:'37%',unresize:true},
            ] ]

        })




    }





}

//获取数据表
layui.use('table',function(){
    dataSourceUrl = $('#dataSource').attr("action")//获取表格数据源
    flushUrl = dataSourceUrl//存储最近刷新的缓存
    flushMethod = 'get'//存储最近刷新的方法
    myTable.tableFlush(dataSourceUrl,flushMethod)
})


//选取日期范围
layui.use('laydate',function () {
    let laydate = layui.laydate;

    //获取日期并将数据存入Vue框架
    laydate.render({
        elem:'#dateRange',
        range:['#startDate','#endDate'],
        btns: ['clear', 'confirm'],
        done:function (value,date,endDate) {
            let start = JSON.parse(JSON.stringify(date))
            let end = JSON.parse(JSON.stringify(endDate))
            if(!(value === '' || value === undefined || value === null)){
                selectVue.$data.startDate = start.year+'-'+start.month+'-'+start.date
                selectVue.$data.endDate =  end.year+'-'+end.month+'-'+end.date
                console.log(value)
            }else{
                selectVue.$data.startDate = ''
                selectVue.$data.endDate =  ''
            }

        },
    })

})

//数据查询Vue框架
let selectVue = new Vue({
    el:'#selectSubmit',
    data:{
        message:'',
        startDate:'',
        endDate:'',
        selectedId:[]//复选框数据集
    },
    methods:{
        //vue查询事件
        selectClick:function (event) {
            let choice = $("[name='userChoice']")//获取单选框选项值
            let realChoice = ''
            let urlprefix = $('#selectVisitor').attr("action");
            for (let i = 0; i <choice.length ; i++) {
                if (choice[i].checked) realChoice = choice[i].value //因为单选框这个组件的数值传递，vue框架的v-model属性和layui要求冲突，所以这里不用v-model传值
            }
            if(this.message ===''){
                layer.msg("查询数据不能为空！",{
                    time:1500
                })
            }else if(realChoice ==='byIP'){//ip匹配

                if(!checkedIP(this.message)){//检查IP地址是否合法
                    layer.msg("IP地址非法！",{
                        time: 1500
                    })
                }else if(this.startDate ==='' || this.endDate ===''){//检查日期范围选择
                        layer.msg("请选择查询日期范围！",{
                            time:1500
                        })

                }else {
                    let url = urlprefix + realChoice + "/"+this.message+"/"+this.startDate+"/"+this.endDate
                    flushUrl= url
                    flushMethod = 'get'
                    myTable.tableFlush(url,flushMethod)

                }

            }else if(!checkId(this.message)){//id匹配
                layer.msg("用户id非法",{
                    time:1500
                })
            }else if(this.startDate ==='' || this.endDate ===''){//检查日期范围选择
                layer.msg("请选择查询日期范围！",{
                    time:1500
                })
            }else{
                let url = urlprefix + realChoice + "/"+this.message+"/"+this.startDate+"/"+this.endDate
                flushUrl= url
                flushMethod = 'get'
                myTable.tableFlush(url,flushMethod)
            }
        },

        //vue删除事件
        deleteClick:function (event) {
            if(this.selectedId.length === 0){
                layer.msg("请选择要删除的行",{
                    time:1500
                })
            }else{
                layer.confirm("真的删除么",function (index) {

                    layer.close(index)
                    let url = $('#deleteVisitor').attr("action")
                    axios({
                        url:url,
                        method:'delete',
                        data: {
                            deleteInfo:selectVue.$data.selectedId
                        }
                    }).then(function (response) {
                        layer.msg(JSON.stringify(response.data),{
                            time:2500
                        })
                        myTable.tableFlush(dataSourceUrl,'get')
                    })
                })

            }
        }
    }
})
//监听复选框事件
myTable.table.on('checkbox(dataTable)',function (obj) {
    let checkStatue = myTable.table.checkStatus('dataTable')
    let checkedData  = JSON.parse(JSON.stringify(checkStatue.data))
    let dataLength = checkStatue.data.length
    selectVue.$data.selectedId = []
    for(let i = 0;i< dataLength;i++){
        selectVue.$data.selectedId.push({"logId":checkedData[i].logId})

    }


})
/*
---------------------------------------------------------请求记录表----------------------------------------------
 */

//定义数据源和刷新数据源以及数据刷新方法
let dataSourceRequestUrl = ''
let flushUrlRequest = ''
let flushMethodRequest = ''



//自定义局部刷新表格对象，其中包含局部刷新表格的方法
let myTableRequest = {
    table:layui.table,
    tableFlush: function(dataSourceUrl,sendMethod){
        this.table.render({
            elem:'#dataTableRequest'
            ,cellMinWidth: 100
            ,height: 616
            ,method: sendMethod //请求方式
            ,url: dataSourceUrl //数据接口
            ,page: true//开启分页
            ,autoSort:true
            ,limit:14
            ,even:true
            ,response:{
                statusCode: 200,
            }
            //动态数据表格
            //如果响应数据格式不符合layui默认要求，则需要用到phraseData
            ,cols: [ [ //表头,两个括号间的空格不能去
                {type:'checkbox',width: '6%'},
                {field: 'index', title: '序号', width:'31%', unresize:true, sort: true },
                {field: 'traceIp', title: '来源IP', width:'31%',unresize:true},
                {field: 'traceDate', title: '访问日期', width:'31%',unresize:true},
            ] ]

        })




    }


}



//获取数据表
layui.use('table',function(){
    dataSourceRequestUrl = $('#dataSourceRequest').attr("action")//获取表格数据源
    flushUrlRequest = dataSourceRequestUrl//存储最近刷新的缓存
    flushMethodRequest = 'get'//存储最近刷新的方法
    myTableRequest.tableFlush(dataSourceRequestUrl,flushMethodRequest)



})



//选取日期范围
layui.use('laydate',function () {
    let laydate = layui.laydate;

    //获取日期并将数据存入Vue框架
    laydate.render({
        elem:'#dateRangeRequest',
        range:['#requestStartDate','#requestEndDate'],
        btns: ['clear', 'confirm'],
        done:function (value,date,endDate) {
            let start = JSON.parse(JSON.stringify(date))
            let end = JSON.parse(JSON.stringify(endDate))
            if(!(value === '' || value === undefined || value === null)){
                selectRequestTraceVue.$data.startDate = start.year+'-'+start.month+'-'+start.date
                selectRequestTraceVue.$data.endDate =  end.year+'-'+end.month+'-'+end.date
                console.log(value)
            }else{
                selectRequestTraceVue.$data.startDate = ''
                selectRequestTraceVue.$data.endDate =  ''
            }

        },
    })

})


//数据查询Vue框架
let selectRequestTraceVue = new Vue({
    el:'#selectRequestSubmit',
    data:{
        message:'',
        startDate:'',
        endDate:'',
        selectedId:[]//复选框数据集
    },
    methods:{
        //vue查询事件

        selectClickRequest:function (event) {
            let urlPrefix = $('#selectRequest').attr("action")
            if (this.message === '') {
                if(this.startDate === '' || this.endDate === ''){
                    layer.msg("查询数据不能为空！", {
                        time: 1500
                    })
                }else{
                    let url = urlPrefix  + "/" + this.startDate + "/" + this.endDate
                    flushUrlRequest = url
                    flushMethodRequest = 'get'
                    myTableRequest.tableFlush(url, flushMethodRequest)
                    layer.msg("已获取到纯日期查询结果", {
                        time: 1500
                    })
                }

            } else if (!checkedIP(this.message)) {//检查IP地址是否合法
                layer.msg("IP地址非法！", {
                    time: 1500
                })
            } else if (this.startDate === '' || this.endDate === '') {//检查日期范围选择
                layer.msg("未选择日期，默认无日期范围限制！", {
                    time: 1500
                })
                let url = urlPrefix+"/"+this.message
                flushUrlRequest = url
                flushMethodRequest = 'get'
                myTableRequest.tableFlush(url, flushMethodRequest)
            } else {
                layer.msg("已选择日期范围限制！", {
                    time: 1500
                })
                let url = urlPrefix + "/" + this.message + "/" + this.startDate + "/" + this.endDate
                flushUrlRequest = url
                flushMethodRequest = 'get'
                myTableRequest.tableFlush(url, flushMethodRequest)

            }




        },

        //vue删除事件
        deleteClickRequest:function (event) {
            if(this.selectedId.length === 0){
                layer.msg("请选择要删除的行",{
                    time:1500
                })
            }else{
                layer.confirm("真的删除么",function (index) {

                    layer.close(index)
                    let url = $('#deleteRequest').attr("action")
                    axios({
                        url:url,
                        method:'delete',
                        data: {
                            deleteInfo:selectRequestTraceVue.$data.selectedId
                        }
                    }).then(function (response) {
                        layer.msg(JSON.stringify(response.data),{
                            time:2500
                        })
                        myTableRequest.tableFlush(flushUrlRequest,flushMethodRequest)
                    })
                })

            }
        }
    }
})
//监听复选框事件
myTable.table.on('checkbox(dataTableRequest)',function (obj) {
    let checkStatue = myTableRequest.table.checkStatus('dataTableRequest')
    let checkedData  = JSON.parse(JSON.stringify(checkStatue.data))
    let dataLength = checkStatue.data.length
    selectRequestTraceVue.$data.selectedId = []
    for(let i = 0;i< dataLength;i++){
        selectRequestTraceVue.$data.selectedId.push({"traceId":checkedData[i].traceId})

    }


})
/*
---------------------------------------------不涉及到数据传递的组件事件都给jquery-------------------------------------------------
 */
$(document).ready(function () {
    $('#flushButton').click(function (){//刷新访问记录表按钮
        myTable.tableFlush(flushUrl,flushMethod)
        selectVue.$data.selectedId = []
        layer.msg("数据已经刷新",{
            time:1500
        })
    })

    $('#flushButtonRequest').click(function (){//刷新请求记录表按钮
        myTableRequest.tableFlush(flushUrlRequest,flushMethodRequest)
        selectRequestTraceVue.$data.selectedId = []
        layer.msg("数据已经刷新",{
            time:1500
        })
    })
})